<template>
  <div class="archive">
    <div class="count">
      {{ this.$route.params.name || $t("header.archive") }}：{{count}}
	  {{$t("archive.article")}}
    </div>
    <el-timeline>
      <el-timeline-item
        v-for="(activity, index) in activities"
        :key="index"
        :color="activity.color"
        :timestamp="activity.timestamp"
        placement="top"
        @mouseenter="hoverLine(activity)"
      >
        <div class="line-item">
          <router-link :to="'/article/'+activity.id" tag="span">{{
            activity.content
          }}</router-link>
        </div>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>

<script>
import request from "../api/article";
export default {
  name: "archive",
  data() {
    return {
      activities: [],
	  count: 0,
    };
  },
  methods: {
    hoverLine(activity) {
      activity.color = "#409eff";
    },
  },
  created() {
    request.getArchiveList().then((res) => {
      if (res.data.code != 200) {
        this.$message({
          message: "加载归档数据失败",
          type: "error",
        });
        return false;
      }
	  this.activities = res.data.data.list
	  this.count = res.data.data.count
    });
  },
};
</script>

<style scoped>
.line-item {
  display: inline-block;
}

.line-item:hover {
  cursor: pointer;
  color: #409eff;
}

.count {
  margin-bottom: 20px;
  font-size: 20px;
  color: #e6a23c;
}
</style>